<template>
  <a-card :bordered="true">
    <div class="main">
      <a-table
        :dataSource="dataSource"
        :columns="columns"
        bordered
        :pagination="false"
        :scroll="{ x: 900 }"
      >
        <!-- 
      作用域插槽: 仍然是把父组件具名插槽内容传进来, 
                但是在父组件的插槽内容可以用使用子组件上传递的数据
                (这样插槽内容就可以使用父组件、子组件里的数据了)
      这个template标签是传入table组件的具名+作用域插槽标签,
      这里template标签有多少个,取决于父组件的插槽了多少个,可以通过slots属性拿到,
      先绑定#具名插槽名,用slots(父组件的template标签具名+作用域插槽)遍历出来的key就是正确的插槽名,
      { column, record, index, text }是table组件作用域插槽传过来的四个参数 -->
        <template
          v-for="(value, key) in slot"
          #[key]="{ column, record, index, text }"
          :key="key"
        >
          <!-- 
        这里使用具名插槽+作用域插槽,只有父组件对应的具名插槽才会显示被作用域插槽覆盖,
        所以这里的slot标签不会显示内容,而是显示父组件的对应具名插槽内容,
        既然显示父组件的标签内容,那么父组件就用table对应的参数,这里就v-bind传过去,
        slot标签的作用域插槽可以传多个属性过去,再把page、size也传过去,因为父组件要用,
        子组件v-bind无论多少个,父组件接收的都是一个对象,可以解构直接拿到所有子组件传过来的参数   -->
          <slot
            :name="key"
            v-bind="{ column, record, index, text }"
            :page="page"
            :size="size"
          ></slot>
        </template>
      </a-table>
      <a-pagination
        v-model:current="page"
        v-model:pageSize="size"
        :page-size-options="['1', '5', '10', '20', '30']"
        :total="total"
        @change="onChange"
        :show-total="() => `共 ${total} 条`"
        show-quick-jumper
        showSizeChanger
      />
    </div>
  </a-card>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  name: 'tableComponent',
  props: {
    dataSource: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    },
    total: {
      type: Number,
      required: true
    },
    fatherName: {
      type: String
    }
  },
  setup(props, { emit, slots }) {
    // let page = ref<number>(props.paginationData.page)
    // let size = ref<number>(props.paginationData.size)
    // let total = ref<number>(props.paginationData.total)
    let page = ref<number>(1)
    let size = ref<number>(1)
    if (props.fatherName) {
      // 在ts中,localStorage使用方法:
      // 因为localStorage的字段和值都可能是null,所以先if判断localStorage的字段在不在
      // 在的话就取值出来,但这个值可能是空,就是null
      // 所以再次判断取出来的值是不是true,是true的话说明字段存在值
      // 那么JSON.parse就一定可以转换,转换出来一定有值,那么就可以赋值给需要的变量了
      const employees_pagesize = localStorage.getItem(props.fatherName)
      if (employees_pagesize) {
        size.value = JSON.parse(employees_pagesize)
      }
    }
    // slots:
    // slots是父组件插槽的内容
    // 是一个对象,其中对象的key名称和对应个数
    // 由父组件的具名插槽名和最外围template标签个数决定
    let slot = slots
    // console.log(slot)
    function onChange(page: number, size: number) {
      emit('change', { page, size })
      if (props.fatherName) {
        window.localStorage.setItem(props.fatherName, JSON.stringify(size))
      }
    }
    // 组件一显示就调用父组件的方法请求数据传过来显示
    // onChange(page.value, size.value)
    return {
      slot,
      page,
      size,
      onChange
    }
  }
})
</script>
<style lang="less">
.ant-btn {
  padding: 4px 5px;
}

.ant-pagination {
  float: right;
}
</style>
